import { useState, useEffect } from 'react'
import {hanZis} from '../utils/hanZis'
import './style/汉字.scss'



// const hanZis = '一二三四五六七八九十人口手上中下大小不对子了月水火海头眼耳鼻舌牙脚地鸡蛋爸妈爷奶姥打牛车太阳阿洛吃喝来'
/* const hanZis = [
    { 上: { 词: ['上面', '上海', '上火'] } },
    { 打: { 词: ['打屁股', '打架', '打搅团'] } },
    { 车: { 词: ['汽车', '开车', '买车'] } },
] */

let synth = {}
export default () => {
    const { navigate } = window.store
    const [currHanZiItem, setCurrHanZiItem] = useState(hanZis[0])
    // const [currHanZi, setCurrHanZi] = useState(hanZis[0])
    const [voices, setVoices] = useState([])
    const [currVoice, setCurrVoice] = useState({})
    const currHanZi = currHanZiItem.zi

    useEffect(() => {
        synth = window.speechSynthesis
        synth.addEventListener("voiceschanged", () => {
            const voices = synth.getVoices()
            const cnVoices = voices.filter(item => item.lang === 'zh-CN')
            setVoices(cnVoices)
            setCurrVoice(cnVoices[0])
            console.log('~~cnVoices', cnVoices)
        })
    }, [])

    const onVoicerClick = (item) => {
        const str = currHanZi+' '+currHanZiItem.词.join(' ')
        const utterThis = new SpeechSynthesisUtterance(str)
        console.log('~~item', item)
        utterThis.voice = item
        synth.speak(utterThis)
        setCurrVoice(item)
    }

    return <div className='p-hanZi'>
        <h1>电梯识字</h1>
        <div className='layout'>
            <div className='l'>
                <ul className='btns'>
                    {/* <li className='btn' onClick={() => navigate(-1)}>←</li> */}
                    <li className='btn' onClick={() => navigate(-1)}><i className='iconfont i-dianTiKaiMen' /></li>
                    {hanZis.map(item =>
                        <li className={'btn ' + (currHanZiItem === item ? 'active' : '')} onClick={() => setCurrHanZiItem(item)}>{item.zi}</li>
                    )}
                </ul>
            </div>
            <div className='r'>
                <div className='mainHanZi'>{currHanZi}</div>
                <ul className='zuCi'>{currHanZiItem.词.map((item) =>
                        <li className={item === currVoice ? 'active' : ''}>{item}</li>
                    )}</ul>
                <h3>选择播音员</h3>
                <ul className='voicer'>
                    {voices.map((item) =>
                        <li onClick={() => onVoicerClick(item)} className={item === currVoice ? 'active' : ''}>{item.name.split(' ')[1]}</li>
                    )}
                </ul>

            </div>
        </div>
    </div>
}